<script setup lang="ts">
    import { defineProps, getCurrentInstance } from 'vue';
    import { useCommentStore } from '@/stores/comment';
    import type { CommentItem } from '@/services/type';

    import CommentRelease from '@/components/CommentBox/Release/index.vue';
    import moment from 'moment';

    const internalInstance = getCurrentInstance();
    const commentStore = useCommentStore();

    // 配置props
    const { item, type = 0, wznm, i } = defineProps<{item: CommentItem, type: number, wznm?: string, i: number}>();

    // 监控评论框是否显示触发事件
    const hanlderReplyIsShow = (i: number, j: number, type: string, isShow: boolean) => {
        if (internalInstance) {
            internalInstance.emit('hanlderReplyIsShow', i, j, type, isShow);
        }
    }
</script>
<template>
    <div :id="'comment-' + item.comment_id" class="comment-box">
        <div class="comment-body">
            <div class="user-avatar-box">
                <img class="avatar" :src="item.comment_user_info.avatar ? item.comment_user_info.avatar : '@/assets/icon.jpg'" />
            </div>
            <div class="parent content" @mouseenter="$emit('handleMouseEnter', i)"  @mouseleave="$emit('handleMouseLeave', i)">
                <div class="author">
                    <!-- 个人信息名片 -->
                    <user-card :yhnm="item.comment_user_info.yhnm">
                        <a style="color:#515767;font-weight: 400;font-size: 16px;">{{item.comment_user_info.nickName}}</a>
                    </user-card>
                </div>  
                <div class="metadata">
                    <span class="date">{{ moment(item.comment_time).startOf('minute').fromNow() }}</span>
                </div>    
                <div class="content-text" v-html="item.content" style="color: #252933;"></div> 
                <div class="comment-img-box" v-if="item.pic">
                    <div class="comment-img">
                        <img :src="item.pic.url" 
                            :width="item.pic.width" 
                            :height="item.pic.height" 
                            :style="'width:' + item.pic.width + 'px;height:' + item.pic.height + 'px;'"
                        />
                    </div>
                </div>
                <div class="actions">
                    <div class="comment-btn" v-if="!item._show">
                        <svg-icon href='#icon-comment' width="13px" height="13px" fill="#999999" style="margin-top: 2px;margin-right: 5px"></svg-icon>
                        <a class="reply" @click="hanlderReplyIsShow(i, 0, 'parent', true)">回复</a>
                    </div> 
                    <div class="comment-btn cancel" v-if="item._show">
                        <svg-icon href='#icon-return' width="14px" height="14px" fill="#999999" style="margin-right: 5px"></svg-icon>
                        <a class="reply" @click="hanlderReplyIsShow(i, 0, 'parent', false)">取消回复</a>
                    </div>
                     <!-- 点赞特效组件 -->
                     <!-- <GiveLike /> -->
                </div>
                <div class="replyBar" v-if="item._show">
                    <!-- 评论发布 -->
                    <comment-release  
                        ref="commentRelease" 
                        :withHeader="false" 
                        :commentId="item.comment_id"
                        :type="type"
                        :wznm="wznm"
                    />
                </div>
            </div>
        </div>
        <div class="comments" v-if="item.children != null && item.children.length !== 0" style="margin-left: 50px">
            <div 
                v-for="(reply, j) in item.children" 
                :id="'comment-' + reply.comment_id" 
                class="comment"  
                @mouseenter="$emit('handleMouseEnter', i, j)"  
                @mouseleave="$emit('handleMouseLeave', i, j)" 
                style="margin-top: 10px;" :key="j"
            > 
                <div class="comment-body">
                    <div class="user-avatar-box" style="width: 28px;height: 28px;margin-right: 10px;">
                        <img class="avatar" :src="reply.comment_user_info.avatar ? reply.comment_user_info.avatar : require('@/assets/icon.jpg')" />
                    </div>
                    <div class="child content">
                        <div class="author">
                            <!-- 个人信息名片 -->
                            <user-card :yhnm="reply.comment_user_info.yhnm">
                                <a href="/" style="color:#515767;font-weight: 400;font-size: 16px;">
                                    {{reply.comment_user_info.nickName}}
                                </a>
                            </user-card>
                        </div>  
                        <div class="metadata">
                            <span class="date">{{ moment(reply.comment_time).startOf('minute').fromNow() }}</span>
                        </div>    
                        <div class="content-text">
                            <template v-if="reply.level === 3">
                                <span style="margin-right: 5px;">回复</span>
                                <!-- 个人信息名片 -->
                                <user-card :yhnm="reply.reply_user_info.yhnm">
                                    <a href="/" style="color:#515767;font-weight: 400;font-size: 16px;">{{reply.reply_user_info.nickName}}：</a>
                                </user-card>
                            </template>
                            <label v-html="reply.content" style="font-size: 15px;color: #252933;"></label>
                        </div> 
                        <div class="comment-img-box" style="margin: 5px 0 10px 0;" v-if="reply.pic">
                            <div class="comment-img">
                                <img :src="reply.pic.url" 
                                    :width="reply.pic.width" 
                                    :height="reply.pic.height" 
                                    :style="'width:' + reply.pic.width + 'px;height:' + reply.pic.height + 'px;'"
                                />
                            </div>
                        </div>
                        <div class="actions">
                            <div class="comment-btn" v-if="!reply._show">
                                <svg-icon href='#icon-comment' width="13px" height="13px" fill="#999999" style="margin-top: 2px;margin-right: 5px"></svg-icon>
                                <a class="reply" @click="hanlderReplyIsShow(i, j, 'child', true)">回复</a>
                            </div>
                            <div class="comment-btn cancel" v-if="reply._show">
                                <svg-icon href='#icon-return' width="14px" height="14px" fill="#999999" style="margin-right: 5px"></svg-icon>
                                <a class="reply" @click="hanlderReplyIsShow(i, j, 'child', false)">取消回复</a>
                            </div>
                            <!-- 点赞特效组件 -->
                            <!-- <GiveLike /> -->
                        </div>
                        <div class="replyBar" v-if="reply._show">
                            <!-- 评论发布 -->
                            <comment-release  
                                ref="commentRelease" 
                                :withHeader="false" 
                                :commentId="reply.comment_id"
                                :type="type"
                                :wznm="wznm"
                                :i="i"
                            />
                        </div>
                    </div>
                </div>
            </div> 
            <div class="view-more loading" v-if="item.loading">
                <span>加载中...</span>
            </div>
            <div class="view-more default" v-if="!item.loading && item.reply_count > 2 && item.reply_count != item.children.length">
                <span @click="commentStore.getReplyList({wznm, commentId: item.comment_id, i})">
                    <template v-if="item.children.length <= 2">
                        查看全部 {{ item.reply_count }} 条回复
                    </template>
                    <template v-if="item.children.length > 2">
                        查看更多回复
                    </template>
                    <el-icon style="margin-left: 5px;"><ArrowDown /></el-icon>
                </span>
            </div>
        </div>     
    </div> 
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" scoped />